<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <button class="btn1">发送请求11</button>
    <button class="btn2">发送发送请求222</button>
    <button class="btn3">发送post333</button>
    <button class="btn4">发送put请求444</button>
    <script>
    //    axios的默认配置和实例 
    // 一、axios的默认配置
    // let btn1 = document.querySelector(".btn1");
    // let btn2 = document.querySelector(".btn2");
    // 发送ajax的时候会有一些公共配置 

    // 设置 axios的默认配置 ， 所有axios的公共配置
    // axios.defaults.timeout = 2000; // 所有的axios超时时间都是2s
    // axios.defaults.baseURL =  "/api" ; // 基础路径 所有的请求都会把baseURL拼接到url前在发送请求
    // // 1.提取所有 axios的公共路径  2.项目上线以后，没有跨域问题，baseURL后面会修改
    // btn1.onclick = function(){
    //     axios({
    //         url:"/getdata",
    //         method:"get",
    //     }).then(res=>{
    //         let {data} = res;
    //         console.log(data);
    //     })
    // }

    // btn2.onclick = function(){
    //     axios({
    //         url:"/getpostdata",
    //         method:"post",
    //     }).then(res=>{
    //         let {data} = res;
    //         console.log(data);
    //     })
    // }

    // 二、axios创建实例

    let btn1 = document.querySelector(".btn1");
    let btn2 = document.querySelector(".btn2");

    let btn3 = document.querySelector(".btn3");
    let btn4 = document.querySelector(".btn4");

    // 需求 ： 一、二按钮 请求超时设置 2s ，需要请求4000端口服务器 。 二、三按钮请求超时设置3s ，需要请求 5000端口服务器
    // 把请求分类 ： axios可以创建实例 
    // 创建2个 axios实例 
    let instance1 = axios.create({
        timeout:2000,
        baseURL:"http://localhost:4000/api"
    });  // 这个实例请求 4000端口的api路径
    // instance1.defaults.timeout = 2000;
    // instance1.defaults.baseURL = "http://localhost:4000/api"
    
    btn1.onclick = function(){
        instance1({
            url:"/getdata",
            // timeout:2000,
            // baseURL:"http://localhost:4000/api"
        }).then(res=>{
            console.log(res);
        })
    }

    btn2.onclick = function(){
        instance1({
            url:"/getdata2",
            // timeout:2000,
            // baseURL:"http://localhost:4000/api"
        }).then(res=>{
            console.log(res);
        })
    }




    let instance2 = axios.create();  // 这个实例请求5000端口的api路径
    instance2.defaults.timeout = 3000;
    instance2.defaults.baseURL = "http://localhost:5000/api";
    btn3.onclick = function(){
        instance2({
            url:"/getdata1",
            // timeout:3000,
            // baseURL:"http://localhost:5000/api"
        }).then(res=>{
            console.log(res);
        })
    }
    btn4.onclick = function(){
        instance2({
            url:"/getdata2",
            // timeout:3000,
            // baseURL:"http://localhost:5000/api"
        }).then(res=>{
            console.log(res);
        })
    }

    /* 
        一、默认配置设置 ： axios的公共配置 可以提取到defaults里设置 
        二、创建axios实例 ： let instance = axios.create({配置项})
                            instace.defaults.配置键名 = 配置的值
    
    
    */
    </script>
</body>

</html>